<!-- 这是登录页面的主容器 -->  
<template>
    <div class="app">
        <div class="container" onclick="onclick">
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="center">
                <h2>欢迎来到后台管理</h2>
                <input type="username" placeholder="username" v-model="username" />
                <input type="password" placeholder="password" v-model="password" />
                <div @click="login" class="sub">登录</div>
            </div>
        </div>
    </div>
</template>

<script setup>  
// 从vue-router导入useRouter，这是获取路由对象的方法  
import { useRouter } from 'vue-router';  
// 从axios导入axios，这是进行http请求的库  
import axios from 'axios';  
// 从element-plus导入ElMessage，这是Element UI的消息提示组件  
import { ElMessage } from 'element-plus'  


// 使用useRouter获取路由对象并赋值给router  
const router = useRouter();  
  

  
// 用户名、密码、邮箱的初始值都为空字符串  
let username = ""  
let password = ""  
  
// 定义一个函数，用于显示成功的消息提示  
const open = (value) => {  
  ElMessage({  
    message: value,  
    type: 'success',  
  })  
}  
  
// 定义一个函数，用于显示错误的信息提示  
const open2 = (value) => {  
  ElMessage.error(value)  
}  
  
// 定义一个异步函数login，用于处理登录逻辑  
function login() {  
    axios.post("http://localhost:8000/manage/login", {  
        "username": username,  
        "password": password  
        },{  
            headers: {  
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'  
                // 'Content-Type': 'application/json' 
            }  
        }).then((res) => {  
            // 如果返回的code为200，表示登录成功，显示成功消息并跳转到主页  
            if(res.data.code === 200){  
                open("登录成功") 
                const dataToStore = {
                    username:res.data.username,
                    token:res.data.token
                };
                sessionStorage.setItem('manage_token', JSON.stringify(dataToStore));
                router.push({path:'/manage'})  
            }else{  
                // 否则，显示错误消息  
                open2("登录失败")  
            }  
    })  
}  
  

</script>

<style scoped>

@import url("https://fonts.googleapis.com/css?family=Raleway:400,700");
*,
*:before,
*:after {
    box-sizing: border-box;
}
body {
    min-height: 100vh;
    font-family: 'Raleway', sans-serif;
    margin: 0;
}
.container {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    overflow: hidden;
}
.container:hover .top:before,
.container:hover .top:after,
.container:hover .bottom:before,
.container:hover .bottom:after,
.container:active .top:before,
.container:active .top:after,
.container:active .bottom:before,
.container:active .bottom:after {
    margin-left: 200px;
    transform-origin: -200px 50%;
    transition-delay: 0s;
}
.container:hover .center,
.container:active .center {
    opacity: 1;
    transition-delay: 0.2s;
}
.top:before,
.top:after,
.bottom:before,
.bottom:after {
    content: '';
    display: block;
    position: absolute;
    width: 200vmax;
    height: 200vmax;
    top: 50%;
    left: 50%;
    margin-top: -100vmax;
    transform-origin: 0 50%;
    transition: all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
    z-index: 10;
    opacity: 0.65;
    transition-delay: 0.2s;
}
.top:before {
    transform: rotate(45deg);
    background: #e46569;
}
.top:after {
    transform: rotate(135deg);
    background: #ecaf81;
}
.bottom:before {
    transform: rotate(-45deg);
    background: #60b8d4;
}
.bottom:after {
    transform: rotate(-135deg);
    background: #3745b5;
}
.center {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
    transition-delay: 0s;
    color: #333;
}
.sub{
    width: 100%;
    margin: 0 auto;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    background-color: #03a480;
    /* border-radius: 8px; */
}
.center input {
    width: 100%;
    padding: 15px;
    margin: 5px;
    border-radius: 1px;
    border: 1px solid #ccc;
    font-family: inherit;
}
</style>